<template>
  <div class="department-container">
    <div class="app-container">
      <el-tabs v-model="activeName">

        <div class="btn-wrap">
          <el-button type="primary" size="mimi" @click="addRolesBtn">增加按钮</el-button>
        </div>
        <el-tab-pane label="角色管理" name="first">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="50px"
            />
            <el-table-column
              prop="name"
              label="姓名"
            />
            <el-table-column
              prop="description"
              label="描述"
            />
            <el-table-column
              fixed="right"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" round @click="assignPermission(scope.row.id)">分配权限</el-button>
                <el-button type="success" size="mini" round @click="editRolebtn(scope)">编辑</el-button>
                <el-button type="danger" size="mini" round @click="deleteRoleBtn(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagin-wrap">
            <el-pagination
              background
              :current-page.sync="pageData.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageData.pagesize"
              layout=" prev, pager, next, total,sizes"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
      <el-dialog
        :title="isEdit?'编辑角色':'新增角色'"
        :visible.sync="dialogVisible"
        width="60%"
        @close="dialogClosBtn"
      >
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-form-item label="角色" prop="name">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入角色名" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" autocomplete="off" placeholder="请输入描述" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">{{ isEdit?'编辑角色':'新增角色' }}</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="permissionDialogVisible"
        width="30%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <AssignPermission v-if="permissionDialogVisible" :currnt-id="currntId" @close="permissionDialogVisible=false" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getRolesListRequest, addRolesRequest, updateRoleByIdRequest, deleteRoleByIdRequest } from '@/api/setting'
import AssignPermission from './AssignPermission.vue'
import _ from 'lodash'
export default {
  name: 'VueZzwHrIndex',
  components: {
    AssignPermission
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      pageData: {
        page: 1,
        pagesize: 5
      },
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      },
      total: 0,
      // 控制模态框状态 false关闭,true打开
      dialogVisible: false,
      permissionDialogVisible: false,
      // 是否是编辑框
      isEdit: false,
      currntId: ''
    }
  },
  computed: {
    maxPageNum() {
      return Math.ceil(this.total / this.page)
    },
    isLastPageFull() {
      return this.total % this.page === 0
    }
  },
  mounted() {

  },
  async created() {
    await this.getRolesList()
  },
  methods: {
    handleSizeChange(value) {
      this.pageData.page = 1
      this.pageData.pagesize = value
      this.getRolesList()
    },
    handleCurrentChange(value) {
      this.pageData.page = value
      this.getRolesList()
    },
    async getRolesList() {
      try {
        // 接收发请求获取的数据
        const res = await getRolesListRequest(this.pageData)
        console.log(res)
        if (res.success) {
          this.tableData = res.data.rows
          this.total = res.data.total
          // console.log(res.data.rows)
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('获取角色列表信息失败')
      }
    },
    // 添加按钮功能
    addRolesBtn() {
      this.dialogVisible = true
      this.isEdit = false
    },
    async addRole() {
      try {
        const res = await addRolesRequest(this.form)
        console.log(res)
        if (res.success) {
          if (this.isLastPageFull) {
            this.form.page = this.maxPageNum + 1
            this.total++
          } else {
            this.form.page = this.maxPageNum
          }
          this.dialogVisible = false
          this.getRolesList()
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('请求错误!')
      }
    },
    // 编辑按钮功能
    editRolebtn(scope) {
      console.log(scope)
      this.isEdit = true
      this.dialogVisible = true
      // this.formDialog = scope.row  这种模式叫地址的赋值，值的引用只有一份，修改一个，另外一个里面发生改变
      this.form = _.cloneDeep(scope.row)
    },
    // 更新角色数据
    async updateRoleById() {
      try {
        const res = await updateRoleByIdRequest(this.form)
        console.log(res)
        if (res.success) {
          this.dialogVisible = false
          this.getRolesList()
        } else {
          this.$message.error(res.message)
        }
        console.log(res)
      } catch (error) {
        console.log('修改角色信息失败')
      }
    },
    // 表单重置功能
    dialogClosBtn() {
      console.log(1111)
      this.$refs.formRef.resetFields()
      if (this.isEdit) {
        console.log(this.$options)
        this.form = this.$options.data().form
      }
    },
    // 删除按钮功能
    async deleteRoleById(id) {
      try {
        const res = await deleteRoleByIdRequest(id)
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除角色成功!'
          })
          if (this.tableData.length) {
            this.pageData.page--
            if (this.pageData.page <= 0) {
              this.form.page = 1
            }
          }
          this.getRolesList()
        }
      } catch (error) {
        this.$message({
          type: 'info',
          message: '删除角色失败!'
        })
      }
    },
    // 删除按钮事件处理函数
    deleteRoleBtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRoleById(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 提交按钮功能
    onSubmit() {
      // console.log('提交功能')
      // this.dialogVisible = false
      this.$refs.formRef.validate(val => {
        if (val) {
          if (this.isEdit) {
            this.updateRoleById()
          } else {
            this.addRole()
          }
        }
      })
    },
    // 分配权限
    assignPermission(id) {
      this.permissionDialogVisible = true
      this.currntId = id
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  ::v-deep .btn-wrap {
    margin: 15px 0;
  }
  .pagin-wrap{
    margin: 15 0;
    text-align: right
  }
}
</style>
